<template>
  <!-- 饼状图 -->
  <div class="cbox" :style="`width: ${width};height:${height}`">
    <div class="three" ref="lineChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [
          { value: 11, name: "上班时间" },
          { value: 15, name: "下班时间" },
          // { value: 9, name: "租赁", value1: 212 },
          // { value: 5, name: "食堂项目", value1: 2 },
          // { value: 2, name: "重点低值易耗品", value1: 26 },
          // { value: 3, name: "大修", value1: 5 },
          // { value: 6, name: "项目技术服务", value1: 7 },
          // { value: 8, name: "商品销售", value1: 8 },
        ];
      },
    },
    width: {
      type: String,
      default: "800px",
    },

    height: {
      type: String,
      default: "700px",
    },
  },
  data() {
    return {
      angle: 0,
      chartInstance: null,
    };
  },
  methods: {
    getCirlPoint(x0, y0, r, angle) {
      const x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
      const y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
      return {
        x: x1,
        y: y1,
      };
    },
    draw() {
      this.angle = this.angle + 3;
      this.chartInstance.setOption(this.defaultOption, true);
      // window.requestAnimationFrame(draw);
    },
  },
  computed: {
    defaultOption() {
      let data = this.data;
      return {
        backgroundColor: "transparent",
        color: [
          "#0CD3DB",
          "#4386FA",
          "#4FADFD",
          "#488cf7",
          "#38cafb",
          "#4caff9",
          "#646CF9",
          "#4adeca",
          "#2aa7ee",
          "#0270f2",
          "#A098FC",
        ],
        title: {
          // text: "{a|" + 15870 + "} \n {c|总电耗（kwh）}",
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: 46,
                color: "#FFFFFF",
              },

              c: {
                fontSize: 24,
                color: "#6392D3",
                // padding: [5,0],
                marginTop: 24,
              },
            },
          },
        },
        legend: {
          show: true,
          bottom: 10,
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
          formatter: function (name) {
            for (let i = 0; i < 2; i++) {
              if (data[i].name === name) {
                var value = data[i].value;
              }
            }
            return name + " " + value + "";
          },
        },

        tooltip: {
          show: true,
          textStyle: {
            // color: "#fff",
            fontSize: 22,
          },
        },

        animation: false,

        series: [
          // 紫色 线 0.75
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((0 + this.angle) * Math.PI) / 180,
                  endAngle: ((90 + this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#8383FA", // 紫色  线
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },

          // 紫色 点 0.75
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              const point = this.getCirlPoint(x0, y0, r, 90 + this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#8450F9", // 紫色  点
                  fill: "#8450F9", // 紫色
                },
                silent: true,
              };
            },
            data: [0],
          },

          //蓝色 线 0.75
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((180 + this.angle) * Math.PI) / 180,
                  endAngle: ((270 + this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#4386FA", //蓝色 线
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },

          // 蓝色 点 0.75
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              const point = this.getCirlPoint(x0, y0, r, 180 + this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#4386FA", // 蓝色 点
                  fill: "#4386FA",
                },
                silent: true,
              };
            },
            data: [0],
          },

          //浅蓝 线 0.85
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((270 + -this.angle) * Math.PI) / 180,
                  endAngle: ((40 + -this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#144a74", //绿色 线
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },

          // 浅蓝 点 0.85
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              const point = this.getCirlPoint(x0, y0, r, 270 + -this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#144a74", // 绿色 点
                  fill: "#144a74",
                },
                silent: true,
              };
            },
            data: [0],
          },

          // 蓝 线  0.85
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((90 + -this.angle) * Math.PI) / 180,
                  endAngle: ((220 + -this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#15559A", //蓝 线
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },

          // 蓝  点  0.85
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              const point = this.getCirlPoint(x0, y0, r, 90 + -this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#15559A", // 蓝  点
                  fill: "#15559A",
                },
                silent: true,
              };
            },
            data: [0],
          },

          //数据
          {
            type: "pie",
            center: ["50%", "50%"], //圆心的位置
            radius: ["45%", "55%"], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
            label: {
              show: false,
              position: "outside",
              formatter: function (parm) {
                return [
                  `{a|${parm.name}}` +
                    "\n" +
                    `{b|数量}` +
                    `{c|${parm.value}}` +
                    `{b|个}` +
                    "\n" +
                    `{b|金额}` +
                    `{c|${+parm.data.value1}}` +
                    `{b|亿元}`,
                ];
              },
              rich: {
                a: {
                  fontSize: 25,
                  color: "#fff",
                },
                b: {
                  fontSize: 20,
                  color: "#fff",
                },
                c: {
                  fontSize: 20,
                },
              },
            },
            labelLine: {
              show: false,
              length: 70,
              length2: 30,
              lineStyle: {
                width: 2,
              },
            },
            data: data,
          },
        ],
      };
    },
  },

  mounted() {
    this.chartInstance = echarts.init(this.$refs.lineChart);

    const option = this.defaultOption;
    this.chartInstance.setOption(option);

    let timerId = null;
    if (timerId) {
      clearInterval(timerId);
    }
    timerId = setInterval(() => {
      this.draw();
    }, 100);
  },
};
</script>

<style lang="less" scoped>
.cbox {
  // width: 600px;
  // height: 600px;
}

.three {
  width: 100%;
  height: 100%;
}
</style>
